<script lang="ts">
    import Vue from 'vue';
    import {http} from "@/utils/utils";
    import {appInfo} from "@/common/helper";

    export default Vue.extend({
        mpType: 'app',

        onLaunch: function () {
            http.config.baseUrl = 'https://new.kuaixing.vip/';
            // #ifdef MP-WEIXIN
            uni.showLoading({title: '加载中', mask: true});
            uni.login({
                provider: "weixin",
                success: loginInfo => {
                    console.log(loginInfo);
                    http.get("api/ma/login", {code: loginInfo.code})
                        .then((res: any) => {
                            console.log(res);
                            const session = res.data.session;
                            const token = res.data.token;
                            appInfo.session = session;
                            http.config.header = {
                                'Content-Type': 'application/json;charset=UTF-8',
                                'Authorization': `Bearer ${token}`
                            };
                            uni.$emit('Authorization', {})
                        })
                },
                complete: () => {
                    uni.hideLoading()
                }
            });
            // #endif
        },
        onShow() {
            console.log('App Show')
        },
        onHide() {
            console.log('App Hide')
        },

        methods: {
            // authorize(result: any) {
            //     uni.authorize({
            //         scope: 'scope.userInfo',
            //         success: () => {
            //             console.log("授权成功");
            //             this.getUserInfo(result)
            //         }, fail: () => {
            //             console.log("授权失败")
            //         }
            //     })
            // },

            // getUserInfo(session: any) {
            //     uni.getUserInfo({
            //         provider: "weixin",
            //         success: (result: any) => {
            //             console.log(result);
            //             http.get("api/ma/token", {
            //                 sessionKey: session.sessionKey,
            //                 encryptedData: result.encryptedData,
            //                 ivStr: result.iv
            //             }).then((res: any) => {
            //                 console.log(res);
            //                 http.config.header = {
            //                     'Content-Type': 'application/json;charset=UTF-8',
            //                     'Authorization': `Bearer ${res.data}`
            //                 }
            //             })
            //         }
            //     })
            // }
        }
    })
</script>

<style>
    /*每个页面公共css */
    @import "colorui/main.css";
    @import "colorui/icon.css";

    .nav-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0px 40upx 0px;
        justify-content: space-between;
    }

    .nav-li {
        padding: 30upx;
        border-radius: 12upx;
        width: 45%;
        margin: 0 2.5% 40upx;
        background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1;
    }

    .nav-li::after {
        content: "";
        position: absolute;
        z-index: -1;
        background-color: inherit;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: -10%;
        border-radius: 10upx;
        opacity: 0.2;
        transform: scale(0.9, 0.9);
    }

    .nav-li.cur {
        color: #fff;
        background: rgb(94, 185, 94);
        box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
    }

    .nav-title {
        font-size: 32upx;
        font-weight: 300;
    }

    .nav-title::first-letter {
        font-size: 40upx;
        margin-right: 4upx;
    }

    .nav-name {
        font-size: 28upx;
        text-transform: Capitalize;
        margin-top: 20upx;
        position: relative;
    }

    .nav-name::before {
        content: "";
        position: absolute;
        display: block;
        width: 40upx;
        height: 6upx;
        background: #fff;
        bottom: 0;
        right: 0;
        opacity: 0.5;
    }

    .nav-name::after {
        content: "";
        position: absolute;
        display: block;
        width: 100upx;
        height: 1px;
        background: #fff;
        bottom: 0;
        right: 40upx;
        opacity: 0.3;
    }

    .nav-name::first-letter {
        font-weight: bold;
        font-size: 36upx;
        margin-right: 1px;
    }

    .nav-li text {
        position: absolute;
        right: 30upx;
        top: 30upx;
        font-size: 52upx;
        width: 60upx;
        height: 60upx;
        text-align: center;
        line-height: 60upx;
    }

    .text-light {
        font-weight: 300;
    }

    @keyframes show {
        0% {
            transform: translateY(-50px);
        }

        60% {
            transform: translateY(40upx);
        }

        100% {
            transform: translateY(0px);
        }
    }

    @-webkit-keyframes show {
        0% {
            transform: translateY(-50px);
        }

        60% {
            transform: translateY(40upx);
        }

        100% {
            transform: translateY(0px);
        }
    }
</style>
